﻿
@{
    ViewData["Title"] = "订单添加|恩腾五金";
    Layout = "~/Views/Shared/_layout2.cshtml";
}
@model ETWJ.DTO.ProductOrderAddModel
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<form method="post" class="form-x" action="/Employee/Add">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 下单基本信息填写</strong></div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">


                <if condition="$iscid eq 1">
                    <li>

                        <select id="selectedCompany" name="cid" class="input" style="width:200px; line-height:17px;">
                            <option value="0">请选择下单公司</option>
                            @foreach (var company in Model.Companys)
                            {
                                <option name="CompanyId" value="@company.Id">@company.CompanyName</option>

                            }
                        </select>
                    </li>
                </if>



                <li>
                    请选择下单日期：<input style="width:200px; line-height: 17px;height:35px;border: solid 1px #ddd;padding: 10px;" type="date" id="OrderTime" name="OrderTime" value="" />
                </li>

                <li>
                    请选择交货日期：<input style="width:200px; line-height: 17px;height:35px;border: solid 1px #ddd;padding: 10px;" type="date" id="DeliveTime" name="DeliveTime" value="" />
                </li>

                <li>
                    公司下单人：<input style="width:200px; line-height: 17px;height:35px;border: solid 1px #ddd;padding: 10px;" type="text"  id="SinglePeople" name="SinglePeople" value="" />
                </li>

            </ul>
        </div>

        <div class="panel-head"><strong class="icon-reorder"> 下单产品选择</strong></div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">
                <if condition="$iscid eq 1">

                    <li>

                        <select id="ProductSelected" name="cid" class="input" style="width:200px; line-height:17px;">
                            <option value="0">请选择下单产品</option>
                            @foreach (var product in Model.Products)
                            {
                                <option name="ProductId" id="@product.Id" value="@product.Id">@product.Name</option>

                            }
                        </select>
                    </li>

                    <li>下单该产品数量：<input type="text" style="width:200px; line-height: 17px;height:38px;border: solid 1px #ddd;padding: 10px;" id="Num" name="Num" value="" /></li>
                </if>


                <li>
                    <a class="button border-main icon-plus-square-o" href="javacript:void(0)" id="addToOrderList"> 添加到订单列表中</a>
                </li>
            </ul>
        </div>

        <div class="panel-head"><strong class="icon-reorder"> 订单列表</strong></div>

        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <button type="button" class="button border-green" id="checkall"><span class="icon-check"></span> 全选</button>
                    <button type="button" id="deleteFromOrderTabs" class="button border-red"><span class="icon-trash-o"></span> 批量删除</button>
                </li>
            </ul>
        </div>


        <table class="table table-hover text-center" id="tab">
            <tr>
                <th width="10%">ID</th>
                <th width="20%">产品编号</th>
                <th width="15%">产品名称</th>
                <th width="20%">产品价格</th>
                <th width="10%">产品类型</th>
                <th width="10%">下单数量</th>
            </tr>

            <tr v-for="item in mydata.items">
                <td>
                    <input type="checkbox" name="id[]" v-bind:value="item.id" />
                    {{item.id}}
                </td>
                <td>{{item.productCode}}</td>
                <td>{{item.productName}}</td>
                <td>{{item.price}}</td>
                <td>{{item.type}}</td>
                <td><input type="text" style="width:80px;" name="name" v-bind:value="item.num" /></td>
            </tr>

            <tr>
                <td colspan="7">
                    <div class="pagelist">
                        <a href="">首页</a>
                        <a href="">上一页</a>
                        <a href="">1</a>
                        <a href="">下一页</a>
                        <a href="">尾页</a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="clear"></div>
    <div class="form-group">
        <div class="label" style="display:inline-block">
            <label>总价：<text style="color:red;" value="0" id="totalMoney">0</text></label>
        </div>
        <div class="field" style="">
            <button style="float:right;margin-top:25px;" id="addOrder" class="button bg-main icon-check-square-o" type="button"> 提交订单</button>
        </div>
    </div>

   

</form>

<script>


    // 订单总价格
    var totalMoney = 0;

    // 订单产品列表
    var data = {
        items: []
    }
    // 订单产品列表绑定
    var vm = new Vue({
        el: '#tab',
        data: {
            mydata: data
        },
        methods: {

            udelete: function (_id) //删除
            {
            },
            updateu: function (item) //更新
            {
            }
        }
    });

    // 全选
    $("#checkall").click(function () {
        $("input[name='id[]']").each(function () {
            if (this.checked) {
                this.checked = false;
            }
            else {
                this.checked = true;
            }
        });
    })

    // 从订单列表中删除已选中的商品
    $("#deleteFromOrderTabs").click(function () {
        var ids = new Array();　//创建一个数组  ;
        $("input[name='id[]']").each(function () {
            if (this.checked) {
                ids.push($(this).val());
            }
        });
        if (ids.length <= 0) {
            alert("请选中一个再进行删除操作！");
            return;
        }
        if (confirm("您确定要删除吗?")) {

            // 遍历data数据，删除用户选择的数据
            for (var i = 0; i < ids.length; i++) {
                for (var j = 0; j < data.items.length; j++) {
                    if (ids[i] == data.items[j].id) {
                        //alert(ids[i])
                        data.items.splice(j, 1); // splice(第几个开始删，删除几个)
                    }
                }
            }
        }
    });


    // 计算总价格
    function getTotalMoney() {
        for (var i = 0; i < data.items.length; i++) {
            totalMoney += data.items[i].price * data.items[i].num;
            //alert(totalMoney)
        }
        $("#totalMoney").text(totalMoney);
        //$("#totalMoney").val(totalMoney);
    }

    $(function () {

        // 提交订单
        $("#addOrder").click(function () {
            var companyId = $("#selectedCompany").select().val(); // 下单公司编号
            var orderTime = $("#OrderTime").val();
            var deliveTime = $("#DeliveTime").val();
            var singlePeople = $("#SinglePeople").val();
            var orderTotalMoney = totalMoney;
            var products = data.items;


            $.ajax({
                url: "/Order/AddOrder",
                type: "Post",
                dataType:"Json",
                data: {
                    CompanyId: companyId, OrderTime: orderTime,
                    DeliveTime: deliveTime, SinglePeople: singlePeople,
                    OrderSumMoney: orderTotalMoney, Products: products
                },
                success: function (resp) {
                    if (resp.isSuccess == "ok") {
                        window.location.href = "/Home/Tip?RedirectUrl=/Order/List&msg=下单成功&isSuccess=ok";

                    } else {
                        alert("下单失败！")
                    }
                },
                error: function () {
                    alert("请求失败！")
                }
            });

        });
            
        // 添加到订单列表
        $("#addToOrderList").click(function () {
            var num = $("#Num").val();
            var productId = $("#ProductSelected").select().val();
            var productName = $("#ProductSelected").find("option:selected").text();

            if (isNaN(num)) {
                alert("请输入正确的订单的数");
                return;
            };
            if (num <= 0) {
                alert("下订单的数量不能为0");
                return;
            }
            if (productId == 0) {
                alert("请选择正确的产品再点添加到商品列表中！");
                return;
            }

            if (confirm("确定要添加数量为：" + num + ",产品名为：" + productName + "商品到订单列表中吗？")) {

                for (var i = 0; i < data.items.length; i++) {
                    var pid = data.items[i].id;
                    //alert(pid)
                    if (pid == productId) {
                        alert("订单列表中已经存在:" + productName)

                        // 恢复初始状态
                        $("#Num").val("");
                        $("#ProductSelected").find("option").eq(0).prop("selected", true);
                        return;
                    }
                }


                // 获取选中加入订单中的商品信息
                $.ajax({
                    url: "/Product/GetProductInfoById",
                    type: "Post",
                    data: { id: productId },
                    dataType: "Json",
                    success: function (resp) {
                        var typeName;
                        if (resp.data.type == 1) {
                            typeName = "金属";
                        } else if (resp.data.type == 2) {
                            typeName = "塑料";
                        } else {
                            typeName = "其他";
                        }

                        var newData = { "id": productId, "productCode": resp.data.productCode, "productName": resp.data.name, "price": resp.data.price, "num": num, "type": 1,"typeName":typeName }

                        data.items.push(newData);
                        getTotalMoney(); // 重新计算订单价格
                    },
                    error: function () {
                        alert("获取数据失败！")
                    }
                })

              

                // 恢复初始状态
                $("#Num").val("");
                $("#ProductSelected").find("option").eq(0).prop("selected", true);
            }


        });

        function getProductInfoById(id) {
            $.ajax({
                url: "/Product/GetProductInfoById",
                type: "post",
                dataType: "json",
                data: { id: id },
                success: function (data) {
                    //alert(resp.data);
                    var d = data;
                    var d2 = data.data;
                    //alert("发送请求成功了")
                    productInfo = data.data;
                },
                error: function () {
                    alert("网络请求异常，请稍后重试！");
                }
            })
        }



    });


</script>